<template>
   <div class="myheader">
    
       <div class="between">
           <img src="/img/banner/logo.png" alt="">
           <ul>
             <li v-for="(hnav,i) of hnavs" :key="i"><router-link :to="hnav.href" class="a">{{hnav.nav}}</router-link></li>            
           </ul>
           <!-- 登录注册 -->
           <div v-if="$store.state.islogin" id="nav_right">
                  <!-- 头像 -->
              <div class="headimg" style="border:none;padding:0">
                <template>
                  <el-row class="demo-avatar demo-basic base" style="border:none;padding:0">
                    <el-col :span="10" style="border:none;padding:0"> 
                     <!-- <div class="sub-title">circle</div> -->
                     <div class="demo-basic--circle" style="border:none;padding:0">
                        <div class="block" style="border:none;padding:0">
                          <el-avatar :size="50" :src="circleUrl" style="border:none;padding:0">
                          </el-avatar>
                        </div>
                        <!-- <div class="block" >
                           <el-avatar size="small" :src="circleUrl">
                           </el-avatar>
                         </div> -->
                      </div>
                    </el-col>
                  </el-row>   
                </template> 
              </div>
              欢迎：{{$store.state.name}}
               <p @click="close">退出
               </p>
          </div>
           <div v-else>
             <div class="left"><router-link to="/login" class="aa">登录</router-link></div><span>|</span><div class="right"><router-link to="/register" class="aa">注册</router-link></div>
           </div>
       </div>
   </div>
</template>
<script>
export default {
  data(){
    return{
      hnavs:[{nav:'首页',href:'/'},{nav:'城市',href:'/'},{nav:'商城',href:'/shopping'},{nav:'动态',href:'/'},{nav:'硬件产品',href:'/hard'},{nav:'软件产品',href:'/'},{nav:'运营支持',href:'/'},{nav:'加盟合作',href:'/'},{nav:'关于',href:'/'}],
      hnav:['首页','城市','商城','动态','硬件产品','软件产品','运营支持','加盟合作','关于'],
      // 头像
      circleUrl: "http://127.0.0.1:6060/img/banner/avatar.png",
      // sizeList: ["large", "medium", "small"]
    }
  },
  methods: {
    close(){
      sessionStorage.setItem('islogin','');
      sessionStorage.setItem('name','');
      console.log(this.$store.state.islogin);
      this.$router.go(0);
      this.$router.push('/');
    }
  },
}
</script>
<style lang="scss">
    *{
      margin:0;
      padding:0;
    }
   .myheader{
       background-color: #fff;
       margin-bottom: 10px;
    //  background-color: blue;
     .between{
       width: 1200px;
       height: 90px;
       margin:0 auto;
      //  background-color: burlywood;
       img{
         width: 135px;
         height: 41.5px;
         display: block;
         padding:20px 0;  
         float: left;     
       }
       ul{
         float: left;
         list-style: none;
         li{
           float: left;
           font-size: 16px;
           font-weight: 700;
           margin-left: 28px;
           &:hover .a{
             color: #ffc802;
             border-bottom:3px solid #ffc802;
           }
           .a{
             display: inline-block;
             height: 90px;
             line-height: 90px;
             text-decoration: none;
             color:black;
             padding:0 10px;
           }
         }
       }
      
      //  登录注册
       >div{
         float: right;
         color: #ffc802;
         font-size: 16px;
         height: 90px;
         line-height: 90px;
         span{
           margin:0 5px;
           font-size: 20px;
         }
         .left a{
           text-decoration: none;
           color: black;
         }
         & .left:hover {
           background-color: #ffc802;
           color:black;
           border:0;
            
         }
         .right a{
           text-decoration: none;
           color: black;
         }
         & .right:hover {
           background-color: #ffc802;
           color:black;
           border:0;
         }
         div{
           display: inline-block;
           border:1px solid #ddc15a;
           border-radius: 5px;
           height: 33px;
           line-height: 33px;
           padding: 0 20px;
         }
       }
      // .nav_right{
      //   .headimg{
      //      padding:0;
      //      border:0;
      //     .base{
      //        border:0 !important;
      //        padding:0;
      //      }
         
          
      //    }
      //  }
     }
   }
          
          .myheader .between  #nav_right .headimg div>span img{
            padding:0;
            width:58px;  
          }
          .myheader .between  #nav_right p{
            float: right;
            margin-left: 5px;
            cursor: pointer;
          };
          .myheader .between  #nav_right  a{
            color:#ffca08;
            text-decoration: none;
          }
     
</style>